<script setup>
import {useRoute} from "vue-router";

const {proxy} = getCurrentInstance()
const listLoading = ref(false)
const loading = ref(false)
const activityNoteList = ref(null)
const innerRef = ref(null)
const scrollbarRef = ref(null)
const route = useRoute()
const conId = route.params && route.params.conId

const prop = defineProps({
  isRefreshActivityNote: {
    type: Boolean,
  },
  isCanAddActivityNote: {
    type: Boolean,
  }
})
const data = reactive({
  activityNoteForm: {
    id: conId,
    content: ''
  },
  rules: {
    content: [{required: true, message: "动态信息内容不能为空", trigger: "manual"}]
  }
})
const {activityNoteForm, rules} = toRefs(data)
const getList = inject('getActivityNoteList')
let addActivityNote = () => {}
if (prop.isCanAddActivityNote) {
  const injectedAddActivityNote = inject('addActivityNote')
  if (typeof injectedAddActivityNote === 'function') {
    addActivityNote = injectedAddActivityNote
  }
}
onMounted(() => {
  getActivityNoteList()
})

watchEffect(() => {
  if (prop.isRefreshActivityNote) {
    getActivityNoteList()
  }
})

function getActivityNoteList() {
  listLoading.value = true
  getList(conId).then(res => {
    activityNoteList.value = res
    listLoading.value = false
    nextTick(() => {
      scrollbarRef.value.setScrollTop(innerRef.value.clientHeight - 380)
    })
  })
}

/** 添加动态 */
function submitActivityNoteForm() {
  proxy.$refs["activityNoteFormRef"].validate(valid => {
    if (valid) {
      loading.value = true
      addActivityNote(activityNoteForm.value).then(() => {
        loading.value = false
        getActivityNoteList()
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

</script>

<template>
  <el-row :gutter="20" class="mb10">
    <el-col :span="24">
      <el-scrollbar v-loading="listLoading" class="customer-activity" ref="scrollbarRef" height="400px" always >
        <div ref="innerRef">
          <el-text v-for="item in activityNoteList" :type="(item.noteType === '用户') ? 'danger' : 'info'"
                   class="scrollbar-demo-item">
            {{ item.createTime }} [{{ item.operatorName }}] {{ item.content }}
          </el-text>
        </div>
      </el-scrollbar>
    </el-col>
  </el-row>

  <el-row v-show="isCanAddActivityNote">
    <el-col :span="24">
      <el-form @submit.native.prevent :model="activityNoteForm" :rules="rules" ref="activityNoteFormRef"
               v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="content">
              <el-row :gutter="20" style="width: 100%;">
                <el-col :span="20">
                  <el-input v-model="activityNoteForm.content"
                            placeholder="可输入动态信息，请勿超过 1024 个字符"
                            maxlength="1024"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="submitActivityNoteForm">添加动态</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>
.customer-activity {
  margin-bottom: 20px;
  border: #e4e7ed 1px solid;
  border-radius: 4px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 30px;
  margin: 10px;
}
</style>